<template>
  <page-container>
    <DataSummary
      style="width: 100%"
      :countInfo="dayliyList"></DataSummary>
    <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="{ menuSpan: 8 }"
      @on-search="handleSearch">
    </search-form>

    <avue-table
      :dataList="dataList"
      :loading="loading"
      :page="page"
      :tableColumns="tableColumns"
      @onPageChange="onPageChange">
    </avue-table>
  </page-container>
</template>

<script>
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { queryProceedsAccountList } from '@/api/databoard'
import { searchColumns, tableColumns } from './config/table-config'
import DataSummary from './components/data-summary.vue'

export default {
  components: { DataSummary },
  mixins: [tableMixins],
  data() {
    return {
      searchForm: {
        date: [this.$startStamp(new Date()), this.$endStamp(new Date())],
      },
      dayliyList: [],
      accountMap: [],
    }
  },
  computed: {
    ...mapGetters(['commonData', 'countryList']),
    userList() {
      return this.commonData?.userList ?? []
    },

    searchColumns,
    tableColumns,
  },
  methods: {
    async getList() {
      this.dataList = []

      const searchParams = this.formatSearch()
      const queryParams = {
        ...searchParams,
        page: this.page.currentPage,
        page_size: this.page.pageSize,
      }
      if (queryParams?.account === '') return this.$message.error('请选择收款账号')
      this.loading = true
      const { data } = await queryProceedsAccountList(queryParams)
      this.dataList = data?.list ?? []
      this.accountMap = data?.account_map ?? []
      this.page.total = data?.total ?? 0
      this.summaryData = data ?? {}

      this.loading = false
    },
    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      const [start, end] = this.searchForm.date
      searchParams.start = start && this.$dayjs(this.$startStamp(start)).unix()
      searchParams.end = end && this.$dayjs(this.$endStamp(end)).unix()
      delete searchParams.date
      return searchParams
    },
  },
  mounted() {
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped></style>
